<template>
  <div style="" class="bg-black">
    <div class="pt-[40px] relative" style="">
      <div class="colorbox"></div>
      <div class="colorbox2"></div>
      <div class="h1s">Live Video Chat</div>
      <div class="textstyle w-[90%] mx-auto relative text-center" style="z-index: 1000">
        Experience the thrill of real-time connections with Pink Star-our live
        chat video platform! Instantly meet new people face-to-face from around
        the world, share your stories, and enjoy spontaneous video calls with
        strangers. Whether you're looking for friendship, someone to talk to, or
        a way to break the monotony of your day, this live chat app brings
        energy and excitement right to your online video chat with girls.
        Explore a world of vibrant personalities and engaging video chat free
        live with just one click—a unique adventure is waiting to happen.
      </div>
      <div class="w-[70%] mx-auto mt-[20px] relative">
        <div class="w-full h-[100px] absolute left-0 bottom-0 bgblack"></div>
        <video
          src="../assets/img/home/1.mp4"
          loop
          class="w-full rounded-[20px]"
          muted
          autoplay
        ></video>
        <!-- <img src="../assets/img/phone/1.webp" class="w-full" alt="" /> -->
      </div>
      <div class="w-[70%] mx-auto mt-[0px]">
        <NuxtLink
          class="button w-full text-white"
          to="https://play.google.com/store/apps/details?id=com.pinkstar.keeping"
        >
          <img src="../assets/img/home/3.webp" class="w-[30px] mr-3" alt="" />
          <div>
            <div class="text-[12px]">Download on</div>

            <span class="font-bold"> Google Play </span>
          </div>
        </NuxtLink>
      </div>
    </div>
    <div class="h1s mt-12">Random Video Chat</div>
    <div
      class="textstyle w-[85%] mx-auto relative text-center"
      style="z-index: 1000"
    >
      Say goodbye to boring, repetitive chats! This random video chat app works
      as premiere omegle alternative, every swipe opening a door to a surprise.
      Meet people from different countries, cultures, and walks of life in an
      instant. You never know who you’ll connect with—a future friend, a
      fascinating storyteller, or someone who brightens your day. Our chatting
      app with strangers is designed for spontaneity and fun, bringing
      unpredictability and excitement to your video chat experience.
    </div>
    <div class="w-[90%] mx-auto mt-5">
      <img src="../assets/img/phone/2.webp" class="w-full" alt="" />
    </div>
    <div class="h1s mt-12">Online Video Chat</div>
    <div
      class="textstyle w-[85%] mx-auto relative text-center"
      style="z-index: 1000"
    >
      Stay connected anytime, anywhere with 1v1 chat video call on Pinkstar
      video chat. No filters, no distractions—just you and a fresh face ready to
      chat. Whether you’re lounging at home, on a coffee break, or traveling
      abroad, our app allows you to meet and interact with new people
      effortlessly. Engage in high-quality, lag-free video calls and enjoy
      authentic conversations. Perfect for forming friendships, exploring
      cultural exchanges, or simply passing the time in a meaningful way—your
      next great connection is just a call away.
    </div>
    <div
      class="w-[90%] mx-auto mt-5 relative flex justify-between h-[100vw] mb-8 rounded-[30px] overflow-hidden"
    >
      <div class="h-full w-[32%] bg1"></div>
      <div class="h-full w-[32%] bg2"></div>
      <div class="h-full w-[32%] bg3"></div>
    </div>
    <footerDivMindex></footerDivMindex>
  </div>
</template>

<script setup></script>

<style lang="scss">
.h1s {
  @apply text-[35px] text-white font-bold text-center relative;
}
.colorbox {
  width: 219.33px;
  height: 198.44px;
  flex-shrink: 0;
  opacity: 0.9436;
  //   background: #622b6c;
  animation-name: anim1;
  animation-duration: 6s;
  filter: blur(70.98px);
  position: absolute;
  animation-iteration-count: infinite;

  right: 10px;
  top: 10px;
}
.colorbox2 {
  width: 219.33px;
  height: 198.44px;
  flex-shrink: 0;
  opacity: 0.9436;
  animation-name: anim2;
  animation-duration: 10s;
  filter: blur(70.98px);
  position: absolute;
  animation-iteration-count: infinite;
  left: 10px;
  top: 10px;
}
@keyframes anim1 {
  from {
    background: #622b6c;
  }
  50% {
    background: #290e7f;
  }
  100% {
    background: #622b6c;
  }
}
@keyframes anim2 {
  from {
    background: #290e7f;
  }
  50% {
    background: #622b6c;
  }
  50% {
    background: #290e7f;
  }
}

@keyframes animate1 {
  from {
    background-position-y: 0%;
  }
  100% {
    background-position-y: 1000px;
  }
}

@keyframes animate2 {
  from {
    background-position-y: 1000px;
  }
  100% {
    background-position-y: 0;
  }
}

.bg1 {
  background-image: url(../assets/img/phone/3.webp);
  background-size: 100%;
  animation-name: animate1;
  animation-duration: 32s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.bg2 {
  background-image: url(../assets/img/phone/4.webp);
  background-size: 100%;
  animation-name: animate2;
  animation-duration: 32s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.bg3 {
  background-image: url(../assets/img/phone/5.webp);
  background-size: 100%;
  animation-name: animate1;
  animation-duration: 32s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.bgblack {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
}
</style>
